<template>
	<view >
		<view class="u-skeleton">
			<!-- 文章标题信息 -->
			<view>
				<u-image class="u-skeleton-rect" :src="pageInfo.imageAddress" mode="widthFix"></u-image>
			</view>
			<view class="u-text-center u-m-l-20 u-m-r-20 ">
				<!-- 文章标题 -->
				<view class="u-m-b-30 u-skeleton-rect" style="font-size: 50rpx;font-weight: 700;">{{pageInfo.title}}</view>
				<u-line color="blue" />
				<!-- 文章分类信息 -->
				<view class="otherInfo">
					<icon class="iconfont icon-date u-skeleton-fillet"></icon>
					<text v-text="pageInfo.updateDate" class="u-skeleton-rect"></text>
					<icon class="iconfont icon-Eye u-font-lg u-skeleton-fillet"></icon>
					<text v-text="pageInfo.views" class="u-skeleton-rect"></text>
					<hr>
					<icon class="iconfont icon-a-icon_CatalogueClassification u-skeleton-fillet"></icon>
					<text v-text="pageInfo.name" class="u-skeleton-rect"></text>
				</view>
			</view>
			<view>
				<towxml :nodes="markdownToHtml" class="u-skeleton-rect"/>
			</view>
			<u-back-top :scrollTop="scrollTop" top="600" duration="300" bottom="100"></u-back-top>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import towxml from '../../static/towxml/towxml'
	export default {
		components: {
			towxml
		},
		data() {
			return {
				pageInfo: {
					title: 'SpringBoot操作Email',
					imageAddress: 'https://heavenpl.gitee.io/pic/images/springboot-mail.jpg',
					content: '### 配置发件账号↵以163为例，登录163邮箱官网↵点击设置开启IMAP/SMTP服务',
					updateDate: '2021-10-13 21:28',
					views: 1024,
					name: 'springboot相关'
				},
				markdownToHtml: {},
				scrollTop: 0,
				loading:true
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(params) {
			this.$u.get("https://apiblog.hwawy.cn/api/searchOneBlogInfo", {
				id: params.id
			}).then(res => {
				this.pageInfo = res;
				this.markdownToHtml = this.towxml(res.content, 'markdown')
			}),
			setTimeout(() => {
				this.loading = false;
			}, 2000)
		}
	}
</script>

<style>
	.otherInfo>icon {
		margin-right: 5rpx;
	}

	.otherInfo>text {
		margin-right: 45rpx;
	}
</style>
